<template>
	<view class="charts-box">
		<qiun-data-charts type="radar" :opts="opts" :chartData="chartData" />
	</view>
</template>

<script>
	export default {
		props: {
			score: {
				type: Array,
				required: true
			}
		},
		data() {
			return {
				// score: [],
				chartData: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['radar'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666"],
					padding: [0, 0, 0, 0],
					dataLabel: false,
					enableScroll: false,
					legend: {
						show: true,
						position: "top",
						lineHeight: 25
					},
					extra: {
						radar: {
							gridType: "radar",
							gridColor: "#CCCCCC",
							gridCount: 4, // 适配更多网格
							opacity: 0.3, // 增加透明度
							max: 100, // 增大最大值
							labelShow: true,
							border: true,
							radius: 70,
						}
					}
				}
			};
		},
		watch: {
			// 监听 score 变化并更新图表
			score: {
				handler(newVal) {
					this.updateChartData(newVal);
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			updateChartData(score) {
				const categories = ['高兴', '充实', '伤心', '孤独', '迷茫', '纠结'];
				// 如果传入的是对象数组，转换为纯数值数组
				// let dataArray = score.map(item => {
				// 	if (typeof item === 'object' && item.value !== undefined) {
				// 		return Number(item.value);
				// 	}
				// 	return Number(item);
				// });
				const dataArray = score.map(item => Number(item));
				this.chartData = {
					categories,
					series: [{
						name: "情绪图",
						data: dataArray
					}]
				};
			}
		}
		// onReady() {
		// 	this.getServerData();
		// },
		// mounted() {
		// 	this.score = this.score.map(item => ({
		// 		...item,
		// 	}));
		// 	console.log(this.score)
		// },
		// methods: {
		// 	getServerData() {
		// 		//模拟从服务器获取数据时的延时
		// 		setTimeout(() => {
		// 			//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
		// 			let res = {
		// 				categories: ['高兴', '充实', '伤心', '孤独', '迷茫', '纠结'],
		// 				series: [{
		// 					name: "情绪图",
		// 					// data: [90, 70, 80, 40, 60, 80]
		// 					data: this.score
		// 				}, ]
		// 			};
		// 			this.chartData = JSON.parse(JSON.stringify(res));
		// 		}, 500);
		// 	},
		// }
	};
</script>

<style scoped>
	.charts-box {
		width: 100%;
		/* 根据需求调整高度 */
		/* height: 600rpx; */
	}
</style>